<!-- 
    Created by 2024-11-07
    Author: CH_ywx
    Description: 小米商城首页
    Powered by CH_ywx
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 支持移动端浏览器缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>小米商城 - Xiaomi 14 Ultra、Redmi K70、MIX FOLD 3，小米电视官方网站</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./dist/css/bootstrap.css">
    <link rel="stylesheet" href="./css/store.css">
    <script src="./dist/jquery/jquery.min.js"></script>
    <script src="./dist/js/popper.min.js"></script>
    <script src="./dist/js/bootstrap.js"></script>
</head>
<body>
    <!-- 顶部黑色导航区 -->
    <div class="container-fluid top-nav">
        <nav class="navbar navbar-inverse">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="./index.html">小米官网</a></li>
                    <li><a href="./store.html">小米商城</a></li>
                    <li><a href="#">小米澎湃OS</a></li>
                    <li><a href="#">小米汽车</a></li>
                    <li><a href="./miservice.html">云服务</a></li>
                    <li><a href="#">IoT</a></li>
                    <li><a href="#">有品</a></li>
                    <li><a href="./xiaoai.html">小爱开放平台</a></li>
                    <li><a href="#">资质证照</a></li>
                    <li><a href="#">协议规则</a></li>
                    <li><a href="#">下载app</a></li>
                    <li><a href="#">Select Location</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">登录</a></li>
                    <li><a href="#">|</a></li>
                    <li><a href="#">注册</a></li>
                    <li><a href="#">|</a></li>
                    <li><a href="#">消息通知</a></li>
                    <li>
                        <a href="#">
                            <span class="glyphicon glyphicon-shopping-cart">购物车(0)</span>
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <!-- 二层导航区域 -->
    <nav class="navbar navbar-default navbar-second">
        <div class="container-fluid">
            <div class="navbar-header">
            <a class="navbar-brand" href="./store.html">
                <img src="./images/logo-mi2.png" alt="" style="margin-left: 280px;"></img>
            </a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#" style="color: black !important;">Xiaomi手机</a></li>
                <li><a href="#" style="color: black !important;">Redmi手机</a></li>
                <li><a href="#" style="color: black !important;">电视</a></li>
                <li><a href="#" style="color: black !important;">笔记本</a></li>
                <li><a href="#" style="color: black !important;">平板</a></li>
                <li><a href="#" style="color: black !important;">家电</a></li>
                <li><a href="#" style="color: black !important;">路由器</a></li>
                <li><a href="#" style="color: black !important;">服务中心</a></li>
                <li><a href="#" style="color: black !important;">社区</a></li>
            </ul>
            <form class="navbar-form navbar-right" style="margin-right: 200px;">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="打印机">
                    <span class="input-group-btn">
                      <button class="btn btn-default" type="button">
                        <span class="glyphicon glyphicon-search"></span>
                      </button>
                    </span>
                </div>
            </form>
            </div>
        </div>
    </nav> 
    <!-- 商品区 -->
    <!-- 主体内容 -->
    <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav" style="background-color: rgba(0,0,0,0.5);">
                      <li><a href="#" style="color: black !important;">手机</a></li>
                      <li><a href="#" style="color: black !important;">电视</a></li>
                      <li><a href="#" style="color: black !important;">出行 穿戴</a></li>
                      <li><a href="#" style="color: black !important;">耳机 音箱</a></li>
                      <li><a href="#" style="color: black !important;">健康 儿童</a></li>
                      <li><a href="#" style="color: black !important;">生活 箱包</a></li>
                      <li><a href="#" style="color: black !important;">智能 路由器</a></li>
                      <li><a href="#" style="color: black !important;">电源 配件</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-6">
                <!-- 轮播图 -->
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="./images/banner7.jpeg" alt="Image 1">
                    </div>
                    <div class="item">
                        <img src="./images/banner8.jpeg" alt="Image 2">
                    </div>
                    <div class="item">
                        <img src="./images/banner9.jpeg" alt="Image 3">
                    </div>
                </div>
        
                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <span class="sr-only">Next</span>
                </a>
                </div>
            </div>
            <div class="col-sm-3">
                <!-- 右侧内容 -->
                <div class="list-group">
                <a href="#" class="list-group-item">保障服务</a>
                <a href="#" class="list-group-item">企业团购</a>
                <a href="#" class="list-group-item">F码通道</a>
                <a href="#" class="list-group-item">米粉卡</a>
                <a href="#" class="list-group-item">以旧换新</a>
                <a href="#" class="list-group-item">话费充值</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 固定在屏幕右下角的按钮 -->
    <div class="fixed-right">
        <a href="#" class="btn btn-fixed-right">手机APP</a>
        <br>
        <a href="#" class="btn btn-fixed-right">个人中心</a>
        <br>
        <a href="#" class="btn btn-fixed-right">售后服务</a>
        <br>
        <a href="#" class="btn btn-fixed-right">人工客服</a>
        <br>
        <a href="#" class="btn btn-fixed-right">购物车</a>
        <br>
    </div>  
    <div class="container-fluid" style="margin-top: 10px;">
        <a href="#">
            <img src="./images/store-banner.webp" class="img-responsive">
        </a>
    </div>
    <!-- 选购区 -->
    <div class="container shop-nav">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-2">
                    <ul class="list-group">
                        <div class="shop-title">
                            <li class="list-group-item">选购指南</li>
                        </div>
                        <br>
                        <div class="shop-item">
                            <li class="list-group-item">手机</li>
                            <li class="list-group-item">电视</li>
                            <li class="list-group-item">平板</li>
                            <li class="list-group-item">穿戴</li>
                            <li class="list-group-item">耳机</li>
                            <li class="list-group-item">家电</li>
                            <li class="list-group-item">路由器</li>
                            <li class="list-group-item">音箱</li>
                            <li class="list-group-item">配件</li>
                        </div>
                      </ul>
                </div>
                <div class="col-md-2">
                    <ul class="list-group">
                        <div class="shop-title">
                            <li class="list-group-item">服务中心</li>
                        </div>
                        <br>
                        <div class="shop-item">
                            <li class="list-group-item">申请售后</li>
                            <li class="list-group-item">售后政策</li>
                            <li class="list-group-item">维修服务价格</li>
                            <li class="list-group-item">订单查询</li>
                            <li class="list-group-item">以旧换新</li>
                            <li class="list-group-item">保障服务</li>
                            <li class="list-group-item">防伪查询</li>
                            <li class="list-group-item">F码通道</li>
                        </div>
                      </ul>
                </div>
                <div class="col-md-2">
                    <ul class="list-group">
                        <div class="shop-title">
                            <li class="list-group-item">线下门店</li>
                        </div>
                        <br>
                        <div class="shop-item">
                            <li class="list-group-item">小米之家</li>
                            <li class="list-group-item">服务网点</li>
                            <li class="list-group-item">授权体验店/专区</li>
                        </div>
                      </ul>
                </div>
                <div class="col-md-2">
                    <ul class="list-group">
                        <div class="shop-title">
                            <li class="list-group-item">关于小米</li>
                        </div>
                        <br>
                        <div class="shop-item">
                            <li class="list-group-item">了解小米</li>
                            <li class="list-group-item">加入小米</li>
                            <li class="list-group-item">投资者关系</li>
                            <li class="list-group-item">可持续发展</li>
                            <li class="list-group-item">廉洁举报</li>
                        </div>
                      </ul>
                </div>
                <div class="col-md-2">
                    <ul class="list-group">
                        <div class="shop-title">
                            <li class="list-group-item">关注我们</li>
                        </div>
                        <br>
                        <div class="shop-item">
                            <li class="list-group-item">新浪微博</li>
                            <li class="list-group-item">官方微信</li>
                            <li class="list-group-item">联系我们</li>
                            <li class="list-group-item">共公益基金</li>
                        </div>
                    </ul>
                </div>
                <div class="col-md-2">
                    <ul class="list-group">
                        <li class="list-group-item phone-num">400-100-5678</li>
                        <li class="list-group-item message-text">8:00-18:00(仅收市话费)</li>
                        <li class="list-group-item message-text"><img src="./images/person-message.png" style="width: 100px;height: 30px;"></li>
                        <li class="list-group-item phone-num">400-180-8888</li>
                        <li class="list-group-item message-text">8:00-18:00(仅收市话费)</li>
                        <li class="list-group-item message-text">适用于:MIX FOLD、巨屏电视系列</li>
                        <li class="list-group-item message-text"><img src="./images/person-message.png" style="width: 100px;height: 30px;"></li>
                    </ul>
                </div>
            </div>
        </div>
   </div>
   <img class="split" src="./images/split.jpeg" alt="" srcset="">
   <!-- 网页底部 -->
   <div class="container-fluid footer">
        <div class="container" style="padding-top: 20px;">
            <!-- 行 -->
            <div class="row">
                <!-- 第一列 logo -->
                <div class="col-md-1">
                    <img src="./images/logo-mi2.png" style="width: 60px;height: 60px;"></img>
                </div>
                <!-- 第二列 超链接组 -->
                <div class="col-md-11">
                    <!-- 第一行 -->
                    <div class="row">
                        <span><a class="footer-link" href="#">小米商城 |</a></span>
                        <span><a class="footer-link" href="#">小米澎湃OS |</a></span>
                        <span><a class="footer-link" href="#">米家 |</a></span>
                        <span><a class="footer-link" href="#">多看 |</a></span>
                        <span><a class="footer-link" href="#">游戏 |</a></span>
                        <span><a class="footer-link" href="#">音乐 |</a></span>
                        <span><a class="footer-link" href="#">政企服务 |</a></span>
                        <span><a class="footer-link" href="#">小米天猫店 |</a></span>
                        <span><a class="footer-link" href="#">小米集团隐私 |</a></span>
                        <span><a class="footer-link" href="#">小米公司儿童信息保护规则 |</a></span>
                        <span><a class="footer-link" href="#">小米商城隐私政策 |</a></span>
                        <span><a class="footer-link" href="#">小米商城用户协议 |</a></span>
                        <span><a class="footer-link" href="#">问题反馈 |</a></span>
                        <span><a class="footer-link" href="#">Select Location</a></span>
                    </div>
                    <!-- 第二行 -->
                    <div class="row">
                        <span><a class="footer-link" href="#">北京互联网法院法律服务工作站 |</a></span>
                        <span><a class="footer-link" href="#">中国消费者协会 |</a></span>
                        <span><a class="footer-link" href="#">北京市消费者协会</a></span>
                    </div>
                    <!-- 第三行 -->
                     <div class="row">
                        <span class="icp-link">© mi.com 京ICP证110507号 京ICP备10046444号 京公安网备11010802020134号 京网文[2023]0169-004号</span>
                    </div>
                    <!-- 第四行 -->
                    <div class="row">
                        <span class="icp-link">(京) 网械平台备字 (2018) 第0005号 药品医疗器械网络信息服务备案(京)网药械信息备字 (2024)第00478号 营业执照 医疗器械质量公告</span>
                    </div>
                    <!-- 第五行 -->
                    <div class="row">
                        <span class="icp-link">增值电信业务经营许可证编号: 京B2-20180851 网络食品备案经营 京食药网食备202010048 食品经营许可证 新出发京批字第直220280号</span>
                    </div>
                    <!-- 第六行 -->
                    <div class="row">
                        <span class="icp-link">违法和不良信息举报电话: 171-5104-4404 知识产权侵权投诉 本网站所列数据,除特殊说明,所有数据均出自我司实验室测试</span>
                    </div>
                    <!-- 第七行 -->
                    <div class="row" style="margin-top: 5px;">
                        <span><img src="./images/v-logo-2.png" alt="" width="85" height="28" /></span>
                        <span><img src="./images/v-logo-5.png" alt="" width="85" height="28" /></span>
                        <span><img src="./images/v-logo-4.png" alt="" width="85" height="28" /></span>
                        <span><img id="lastFooterImg" src="./images/v-logo-1.png" alt="" width="85" height="28" /></span>
                    </div>
                    <!-- 第八行 -->
                    <div class="row" style="text-align: center;font-family: 隶书;color: #ccc;">
                        <h3>让全球每个人都能带来科技带来的美好生活</h3>
                    </div>
                </div>
            </div>
        </div>
   </div>
   <script src="./js/index.js"></script>
</body>
</html>